<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
    pre {
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    .src-button {
      outline: none;
      border: none;
      color: #fff;
      font-size: 18px;
      padding: 16px;
      background-color: #4a98f7;
      border-radius: 999px;
      margin: 0 auto;
      cursor: pointer;
      box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.13);
      transition: .3s;
    }
    .src-button:active {
      opacity: .6;
    }
    .src-preview {
      display: none;
      position: fixed;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background-color: rgba(0, 0, 0, .65);
      transition: .5s;
    }
    .show {
      display: block;
    }
    .src-preview .screenshot {
      position: fixed;
      left: 50%;
      top: 50%;
      background-color: #fff;
      width: 70%;
      aspect-ratio: 16 / 9;
      transform: translate(-50%, -50%);
      border-radius: 8px;
    }
    .src-preview .screenshot img {
      width: 100%;
    }
    .close-btn {
      position: absolute;
      top: 0;
      right: -25px;
      cursor: pointer;
    }
  </style>
  <body>
    <div class="container">
      <h2>世界末日前夕</h2>
      <pre>
风起，风停,叶子来不及起舞,花儿就凋落了。
门开，门关，邻家的喜字还没干透,孩子就呱呱坠地了。
跑得真急呀!她深深吸一口新鲜的空气,继续侍弄院子里的花草。
咔嚓，她剪去桃花歪扭的枝蔓。桃花呀,即便你只灿烂一季，也不能不修边幅不是?
咕噜，她给水仙灌上满满的清水。水仙呀，春天只剩下尾巴，再不开花你就永远装蒜吧。
喵！一只猫从花盆后蹿了出来，打翻了一盆正酝酿花蕾的山茶花。她生气地捡起一块小石子扔过去，已不见踪影。
算你跑得快。她说。静了一会儿，她又唷喃道，跑得快又怎样呢？跑得过时间吗？世界末日就要来了。这么漂亮的院子，这么美好的一切,都不复存在了。
她早已没了刚得知这个消息时的惊慌与悲伤，安静得跟这个院子一样。独处时，她经常幻想世界末日来临那一天，会是怎样的情形？
或许她正与他坐在摇椅上，看小狗呲牙咧嘴、气喘呼吁地追着白己的尾巴转圈。一圈，两圈，三圈……好像没有尽头，又一下到了尽头。
或许她正与他并排躺在院子中央，被她亲手种的花环绕着，银色的月光披在他们脸上，他久久凝视着她的脸，就像读书时那样。一刹那，那画面就成了永恒。
总之，不管怎么想象，她离不开他，离不开这个院子。尽管她和他住进这个院子，还不到两个月。
三个月前的某一天，晴，没有风，他进门时脸上却挂着风暴。她一看就明白了，他准是从哪里知道世界末日的事情了。
还有多久？他问。
也就三个月吧。她说。
他不语，任凭脸上的风暴变成暴雨交加。
我想辞了工作。他说。
辞了吧。她温顺地附和。
我们把房子卖了吧。他说。
卖了吧。她温顺地附和。
我们买个院子吧，就是我们一直憧憬的那样。他说。
买吧。她还是温顺地附和。
他们结婚时就约定好了，先努力挣钱，在城市里买房子，生孩子，给孩子最好的教育。等将来老了，就找一个山清水秀的地方，盖一座小房子，在院子里种满各种各样的花，弄一块菜地，再养几只狗、几只鸡，过上世外桃源般的惬意生活。为了这个约定，他们没日没夜地忙，省吃俭用地过。
见他天天要到处去拉业务，她对他说，买辆车吧，挤公交太辛苦了。他摇摇头，养车多费钱呀，还得缴保险，还得租车位，还是把钱留着，将来可以买大一点儿的院子。
见她拖着疲惫的身躯晚归，他对她说，不做饭了，我们出去吃吧。她不肯，又不是什么节日，干吗出去吃呀？把钱省下来，给咱将来的院子多添几盆你最爱的茶花。
然而省下的钱，并没有变成院子的面积，也没有变成名贵的花，它们都被送进了银行，变成一纸债单——他们如愿当上房奴了。
这样，他们的第一步目标就算完成了，可是第二步却迟迟完成不了。说不准是谁的原因，也许是他缺乏锻炼造成的，也许是她太过劳累的缘故，总之就是怀不上孩子。
现在看来，这倒是件好事，世界末日到来时也少个牵挂。他们把约定提前了，短短的三个月内，他们把三十年后要做的事，做了个遍，在小院子里等待世界末日的来临。
然而她的世界末日最终却没有来。医生说,她的癌细胞居然没再扩散，真是奇迹。
他的世界末日也没有来。她没事，他也就用不上偷偷藏着的那瓶安眠药了。
他们开了香槟庆祝，她与他并排躺在院子中央，被她亲手种的花环绕着，银色的月光披在他们脸上，他久久凝视着她的脸，就像读书时那样。
我们又得重新开始奋斗了。他说。
嗯,重新开始吧。她温顺地附和。
桃花正妖娆，水仙花也不装蒜了，没有花盆护着的山茶花顽强地爆了蕾……院子正是最美的时候。可是他们看不见。从医院检查回来的第二天，他们就迫不及待地收拾行李回城里了，他们唯一带走的是那条小狗，直到现在它还是会傻傻地追自己的尾巴。
</pre>
    <button class="src-button">screenshot</button>
    </div>
    <div class="src-preview">
      <div class="screenshot">
        <img src="" alt="" />
        <div class="close-btn">❎</div>
      </div>
    </div>
  </body>
  <script>
    const screenshotBtn = document.querySelector(".src-button");
    const srcPreview = document.querySelector(".src-preview");
    const closeBtn = document.querySelector(".close-btn");

    
    async function captureScreen() {
      try{
        const stream = await navigator.mediaDevices.getDisplayMedia();
        const video = document.createElement("video");
        video.addEventListener("loadedmetadata", () => {
          video.play();
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");
          
          canvas.width = video.videoWidth;
          canvas.height = video.videoHeight;
          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
          
          srcPreview.classList.add("show");
          srcPreview.querySelector("img").src = canvas.toDataURL();
          
          // 停止屏幕抓取
          stream.getVideoTracks()[0].stop();
        });
        video.srcObject = stream;
      }catch(e){
        console.log(e);
      }
    }
    
    screenshotBtn.addEventListener("click", captureScreen);
    closeBtn.addEventListener("click", () => {
      srcPreview.classList.toggle("show");
    })
  </script>
</html>